<template>
	<view id="wrap">
		<view class="content">
			<u-swipe-action v-for="item in cardData" :key="item.id">
				<u-swipe-action-item :options="options1" @click='click' :name='item.id'>
					<view class="swipe-action u-border-top u-border-bottom">
						<view class="swipe-action__content">
							<view class="content_item">
								<view class="item_center">
									<!-- 左边图片 -->
									<view class="center_img">
										<!-- <view class="new_state" v-if="item.status==1">
											{{$t('myCollection.apply')}}
										</view>
										<view class="new_state" style="background-color: #FF6D4C ;"
											v-else-if="item.status==2">
											{{$t('myCollection.clustering')}}
										</view>
										<view class="new_state" style="background-color: #666C7F ;" v-else>
											{{$t('myCollection.end')}}
										</view> -->
										<image :src="item.cover" style="width: 160rpx;height: 160rpx;" mode="center">
										</image>
									</view>
									<!-- 右边文字 -->
									<view class="center_text">
										<view class="title">
											{{item.title}}
										</view>
										<!-- <view class="label">
											<view class="label_item" v-for="(itx,index) in item.labels" :key="index">
												{{itx}}
											</view>
										</view> -->
										<!-- <view class="times">
											<image src="../../../static/img/clock-icon.png"
												style="width: 18rpx;height: 18rpx;" mode="">
											</image>
											{{item.activityTime}}
										</view>
										<view class="address">
											<image src="../../../static/img/location-icon.png"
												style="width: 18rpx;height: 18rpx;" mode="">
											</image>
											{{item.address}}
										</view> -->
										<view class="price">
											<view class="price_left">
												￥{{item.price}}
											</view>
											<view class="price_rigth">
												<span>{{item.userNum}}</span> /{{item.stock}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>





		</view>
<!-- 		<view  v-if="cardData.length ==0" class="box-w">
			<image src="/static/img/kongbai.png"></image>
			<p>{{$t('myCollection.blabk')}}</p>
		</view> -->
		<!-- <u-loadmore :status="loadStatus" /> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				bool: false,
				loadStatus: "nomore",
				options1: [{
					text: '取消收藏',

				}],
				cardData: [{
					id:1,
					status:0,
					cover: '../../../static/common/logo.png',
					title: '标题',
					price: '100',
					userNum: '名字',
					stock: '名字'
				},{
					id:1,
					status:0,
					cover: '../../../static/common/logo.png',
					title: '标题2',
					price: '100',
					userNum: '名字',
					stock: '名字'
				}]

			};
		},
		onLoad() {
			// this.getCollectList()
		},
		onShow(){
			 //   uni.setNavigationBarTitle({// 修改头部标题
			 //        title:this.$t('myCollection.title')
			 //    });
				// this.getCollectList()
		},
		// // 触底加载
		onReachBottom() {
			if (this.bool) {
				this.pageNum += 1
				this.getCollectList()
			}
		},
		//响应下拉刷新事件
		onPullDownRefresh() {
			this.pageNum = 1;
			this.getCollectList()
			//关闭加载动画
			uni.stopPullDownRefresh();
		},
		methods: {
			_to(url){
				uni.navigateTo({
					url:url
				})
			},
			getCollectList() {
				// console.log(1111);
				this.$u.api.getCollect({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					version: uni.getStorageSync('version')
				}).then(res => {
					// console.log(res, 'res');
					if (this.pageNum == 1) {
						this.cardData = res.data.list
					} else {
						this.cardData.push(...res.data.list)
					}
					if (this.cardData.length < res.data.total) {
						this.bool = true

					} else {
						this.bool = false
						this.loadStatus = 'nomore'
					}

				})
			},
			click(e) {
				this.$u.api.cancelLike({
					id: e.name
				}).then(res => {
					// console.log(res);
					this.getCollectList()
				})
				// console.log(e);
			}
		},

	}
</script>

<style lang="scss" scoped>
	::v-deep .u-swipe-action .data-v-9005746e{
		margin-bottom: 20rpx;
	}
	::v-deep .u-line-1 .data-v-055cbf89 .u-loadmore__content__text{
		display: -webkit-box !important;
	}
	::v-deep .u-swipe-action-item__right__button__wrapper__text.data-v-353c51ae {
		
		writing-mode: tb-lr;
		-webkit-writing-mode: vertical-lr;
		table-layout: vertical-ideographic;
		width: 30rpx;
	}

	::v-deep .u-line-1 {
		display: flex !important;
		-webkit-writing-mode: vertical-lr !important;
		
	}

	::v-deep .u-border-top {
		border: none;
	}
	::v-deep view.data-v-353c51ae, scroll-view.data-v-353c51ae, swiper-item.data-v-353c51ae{
		margin-bottom: 10rpx;
	}
	#wrap {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F9FA;

		overflow: hidden;
		.box-w{
			width: 340rpx;
			height: 340rpx;
			margin: 340rpx auto;
			image{
				width: 340rpx;
				height: 340rpx;
				margin-left: 40rpx;
			}
			p{
				font-size: 14px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				text-align: center;
				margin-left: 20rpx;
			}
		}
		.content {
			width: 100%;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			.content_item {
				width: 100%;
				// height: 260rpx;
				background: #FFFFFF;
				// margin-top: 20rpx;
				


				.item_center {
					width: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;

					.center_img {
						width: 160rpx;
						height: 160rpx;
						position: relative;

						.new_state {
							width: 80rpx;
							height: 40rpx;
							background: #329CFA;
							position: absolute;
							left: 0;
							top: 0;
							font-size: 20rpx;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}

					.center_text {
						width: 100%;
						margin-left: 32rpx;
						// height: 220rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.title {
							
							// white-space: nowrap;
							// overflow: hidden;
							// text-overflow: ellipsis;
							font-size: 32rpx;
							color: #292D33;

						}

						.label {
							display: flex;

							.label_item {
								min-width: 80rpx;
								height: 36rpx;
								background: #F5F5F7;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								color: #666F80;
								margin-right: 20rpx;
							}
						}

						.times {
							font-size: 20rpx;
							color: #8A8C99;

						}

						.address {
							font-size: 20rpx;
							color: #8A8C99;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.price {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.price_left {
								font-size: 28rpx;
								color: #363B4C;
							}

							.price_rigth {
								font-size: 24rpx;
								color: #8A8C99;

								span {
									color: #363B4C;
								}

							}


						}
					}

				}




			}
		}


	}
</style>

